﻿@{
    ViewBag.Title = "选择器页面";
    Layout = "~/Views/Shared/_Blank_Js.cshtml";
}
@section Head{
    <style type="text/css">
        body {
            font-family: Tahoma, Arial, SimSun;
            font-size: 12px;
        }

        .fr {
            float: right;
        }

        .close {
            font-size: 32px;
            margin: 6px;
        }

        .niko_selector .h16 {
            height: 16px;
        }

        .niko_selector .w80 {
            width: 80px;
        }

        .niko_selector .f12 {
            font-size: 12px;
        }

        .mr {
            margin-right: 4px;
        }

        .niko_dl dt {
            width: 40px;
        }

        .niko_dl dd {
            margin-left: 48px;
        }

        .icon-remove {
            font-size: 18px;
        }
        .icon-remove:before {
            color: #b4b4b4;
        }
    </style>

}
<div class="niko_selector well well-large" style="left: 29px; position: absolute; top: 24px; visibility: visible; z-index: 10000;">
    <button type="button" class="close" data-dismiss="niko_selector">&times;</button>
    <button type="button" class="btn fr btn-success mr10">确定</button>
    <h4>地区选择</h4>
    <div class="box-body">
        <div class="selector-checker">
            <div>
                <span class="selector-checker-tip">请选择地区(最多可以选择5个)</span>&nbsp; <span class="selector-clear btn-link">清空</span>
            </div>
            <div>
                <div class="input-append mr">
                    <button class="btn btn-small" type="button">广州</button>
                    <div class="btn-group">
                        <button class="btn dropdown-toggle btn-small" data-toggle="dropdown">
                            可输入区/镇
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <span class="add-on h16"><i class="icon-remove"></i></span>
                </div>
                <div class="input-append mr">
                    <button class="btn btn-small" type="button">广州</button>
                    <div class="btn-group">
                        <button class="btn dropdown-toggle btn-small" data-toggle="dropdown">
                            可输入区/镇
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <span class="add-on h16"><i class="icon-remove"></i></span>
                </div>
                <span class="label label-info">0/5</span>
            </div>
        </div>
        <div class="selector-hots clearfix">
            <h5 class="selector-hots-title">热门地区：</h5>
            <label class="checkbox inline">
                <input type="checkbox" id="Checkbox1" class="input-small" value="option1">广州
            </label>
            <label class="checkbox inline">
                <input type="checkbox" id="Checkbox2" class="input-small" value="option1">上海
            </label>
            <label class="checkbox inline">
                <input type="checkbox" id="Checkbox3" class="input-small" value="option1">潮州
            </label>
        </div>
        <h5 class="selector-body-title">省/市/直辖市：</h5>
        <div class="selector-body">
            <dl class="dl-horizontal niko_dl">
                <dt>ABCF</dt>
                <dd>
                    <div class="">
                        <div class="">
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">广州</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse1"><i class="icon-remove"></i></span>
                            </div>
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">上海</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse2"><i class="icon-remove"></i></span>
                            </div>
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">潮州</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse1"><i class="icon-remove"></i></span>
                            </div>
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">广州</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse1"><i class="icon-remove"></i></span>
                            </div>
                        </div>
                        <div id="collapse1" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                            </div>
                        </div>
                        <div id="collapse2" class="accordion-body collapse">
                            <div class="accordion-inner">

                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </dd>
                <dt>H</dt>
                <dd>
                    <div class="">
                        <div class="">
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">广州</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse3"><i class="icon-remove"></i></span>
                            </div>
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">上海</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse4"><i class="icon-remove"></i></span>
                            </div>
                        </div>
                        <div id="collapse3" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                            </div>
                        </div>
                        <div id="collapse4" class="accordion-body collapse">
                            <div class="accordion-inner">

                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </dd>
                <dt>JLNQ</dt>
                <dd>
                    <div class="">
                        <div class="">
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">广州</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse5"><i class="icon-remove"></i></span>
                            </div>
                            <div class="input-append mr">
                                <button class="btn btn-small" type="button">上海</button>
                                <span class="add-on h16" data-toggle="collapse" data-parent="#accordion2" href="#collapse6"><i class="icon-remove"></i></span>
                            </div>
                        </div>
                        <div id="collapse5" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                            </div>
                        </div>
                        <div id="collapse6" class="accordion-body collapse">
                            <div class="accordion-inner">

                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                                <div class="input-append mr">
                                    <button class="btn btn-small" type="button">广州</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
</div>
